<script>
export default {
  name: "carPage",
  data(){
return {
  carList:[
      {
    id:0,
    name:'宝马',
    cTime:new Date()
  },
    {
      id:1,
      name:'奔驰',
      cTime:new Date()
    },
  ],
  carId:'',
  carName:'',
}
  },
  methods:{
    add(){
      let obj={
        id:this.carId,
        carName:this.carName,
        cTime:new Date(),
      }
      if(this.carList.some(item=>item.id===this.carId)){
        alert('重复添加')
      }else{
        this.carList.push(obj)
      }
    },
    del(item){
      this.carList.splice(this.carList.indexOf(item),1)
    }
  }

}
</script>

<template>

  <div class="container">
    <router-link to="/carPage1">carPage1</router-link>
    <div class="card">
      <div class="card-header">头部</div>
      <div class="card-body">
        <form class="form-inline">
        <label for="email">id:</label>
        <input type="text" class="form-control" id="email" v-model="carId">
        <label for="pwd">name:</label>
        <input type="text" class="form-control" id="pwd" v-model="carName">
        <button type="submit" class="btn btn-primary" @click="add" >添加</button>
          <label for="search">搜索关键字:</label>
          <input type="text" class="form-control" id="search">
      </form>
        <table class="table">
          <thead>
          <tr>
            <th>id</th>
            <th>name</th>
            <th>cTime</th>
            <th>operation</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item) in carList" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.carName}}</td>
            <td>{{item.cTime}}</td>
            <td><button  class="btn btn-primary" @click="del(item)">删除</button></td>
          </tr>
<!--          <tr>-->
<!--            <td>Mary</td>-->
<!--            <td>Moe</td>-->
<!--            <td>mary@example.com</td>-->
<!--          </tr>-->
<!--          <tr>-->
<!--            <td>July</td>-->
<!--            <td>Dooley</td>-->
<!--            <td>july@example.com</td>-->
<!--          </tr>-->
          </tbody>
        </table>
      </div>

    </div>
  </div>
</template>

<style scoped lang="less">

</style>